import axios from 'axios'
import { React, useEffect, useState } from 'react'
import './friday.css'
import { Carousel } from "antd";
import { Pagination } from 'antd';
import { Statistic, Row, Col } from 'antd';
import "antd/dist/antd.css";
import special from "../../static/轮播.png";
import InterIP from '../../IP/IP'
import { useNavigate } from 'react-router-dom';
export default function Friday() {
    const contentStyle = {
        width: "1280px",
        height: "500px",
    };
    const contentImgStyle = {
        width: "100%",
        height: "100%",
    };
    const navigate = useNavigate();
    const { Countdown } = Statistic;
    //设置截止时间  
    var str = "2021/12/17 00:00:00";
    var endDate = new Date(str);
    const deadline = endDate.getTime();
    
    const [FridayData, setFridayData] = useState([]);
    const [totalNum, setTotalNum] = useState();

    let IP = InterIP().props.children;
    useEffect(() => {
        let IP = InterIP().props.children;
        axios.post('http://' + IP + ':3000/index/selFriday', {
            product_variety: 'friday',
            page: '1'
        }).then((res) => {
            setFridayData((FridayData) => FridayData = res.data.rows)
            setTotalNum((totalNum) => totalNum = res.data.rows_length)
        })
    }, [])
    function pickPage(page) {
        axios.post('http://' + IP + ':3000/index/selFriday', {
            product_variety: 'friday',
            page: page,
        }).then((res) => {
            setFridayData((FridayData) => FridayData = res.data.rows)
        })
    }
    function fridayDetails(id) {
        return () => {
          localStorage.productId = id;
          navigate('/home/fridayDetails')
        }
      }
    return (
        <div>
            <div className="lfy_index_friday_carousel">
                <Carousel autoplay >
                    <div style={contentStyle}>
                        <img style={{ contentImgStyle }} src={special} alt="" />
                    </div>
                    <div style={contentStyle}>
                        <img style={{ contentImgStyle }} src={special} alt="" />
                    </div>
                    <div style={contentStyle}>
                        <img style={{ contentImgStyle }} src={special} alt="" />
                    </div>
                </Carousel >
            </div>
            <div className="lfy_index_friday_waist">
                <div className="lfy_index_friday_waist_countDown">
                    <div>距离活动开始</div>
                    <Row gutter={16}>
                        <Col span={24}>
                            <Countdown title="" value={deadline} format="D 天 H 时 m 分 s 秒" valueStyle={{ color: "#f08200" }} />
                        </Col>
                    </Row>

                </div>
            </div>
            <div className="lfy_index_friday_total">
                <ul className="lfy_index_friday_total_list">
                    {FridayData.map((data) =>
                        <li key={data.product_id} className="lfy_index_friday_total_list_li">
                            <div className="lfy_index_friday_total_list_li_img" onClick={fridayDetails(data.product_id)}>
                                <img src={data.product_img} alt="" />
                            </div>
                            <div className="lfy_index_friday_total_list_li_div">
                                <h4 className="lfy_index_friday_total_list_li_div_h4">{data.product_name}</h4>
                                <h5 className="lfy_index_friday_total_list_li_div_h5">{data.product_number}{data.product_specification}</h5>
                                <h6 className="lfy_index_friday_total_list_li_div_h6">
                                    <span>礼拜五价：￥{data.product_price}</span>
                                    <span>￥{data.product_oldPrice}</span>
                                </h6>
                            </div>
                        </li>
                    )}
                </ul>
                <Pagination className="friday_paging" onChange={pickPage} total={totalNum} pageSize={8}
                ></Pagination>
            </div>
        </div>
    )
}
